<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>iTrip-首页</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/footer.css">
		<script src="js/src/flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

<section id="layout">
			<!-- 顶部搜索栏 -->
			<header class="search">
				<div class="search-box">
					<form action="#" method="">
						<input type="text" src="" placeholder="搜索旅行地/酒店/景点" />
					</form>
				</div>
			</header>
			
			<!-- 内容主体 -->
			<section class="main">
				<!-- 轮播图 -->
				<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide"><a href="#"><img src="images/img/banner1.jpg" alt=""></a></div>
							<div class="swiper-slide"><a href="#"><img src="images/img/banner2.jpg" alt=""></a></div>
							<div class="swiper-slide"><a href="#"><img src="images/img/banner3.jpg" alt=""></a></div>
							<div class="swiper-slide"><a href="#"><img src="images/img/banner4.jpg" alt=""></a></div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
			
				<!-- 导航 -->
				<nav class="entry-nav">
					<div class="row">
						<a href="travel.html" class="col1">
							<span>旅游</span>
						</a>
						<a href="" class="col2">
							<span class="orange exit">出境游</span>
							<span class="purple nearby">周边游</span>
						</a>
						<a href="" class="col3">
							<span class="orange domestic">国内游</span>
							<span class="blue local">当地游</span>
						</a>
					</div>

					<div class="row">
						<a href="" class="col1">
							<span>机票</span>
						</a>
						<a href="" class="col2">
							<span class="bluesky">低价机票</span>
							<span class="cyan ticket">火车票</span>
						</a>
						<a href="" class="col3">
							<span class="bluesky">汽车票/船票</span>
							<span class="bluesky">专车/自驾</span>
						</a>
					</div>

					<div class="row">
						<a href="" class="col1">
							<span>酒店</span>
						</a>
						<a href="" class="col2">
							<span class="yellow">海外酒店</span>
							<span class="green">热门酒店</span>
						</a>
						<a href="" class="col3">
							<span class="yellow">国内酒店</span>
							<span class="bg">特色酒店</span>
						</a>
					</div>
				</nav>
				<!-- 广告 -->
				<div class="ad">
					<a href=""><img src="images/img/ad_0328_02.jpg" alt=""></a>
				</div>
				<!-- 特卖汇 -->
				<div class="sale">
					<div class="title">
						特卖汇
					</div>
					<ul class="content">
						
						<li>
							<img src="images/img/item-img0329_01.jpg" alt="">
							<div class="desc">
								<p>台湾环岛8日7晚跟团游。甩尾狂甩3人行1人免单...</p>
								<div class="tag">
									<span>席位充足</span>
									<span class="prize">
										<i>¥</i><span>1999</span>&nbsp;起
									</span>
								</div>
							</div>
							
						</li>
						<li>
							<img src="images/img/item-img0329_02.jpg" alt="">
							<div class="desc">
								<p>巴厘岛7日5晚自由行。五星豪庭，三星价格3月特...</p>
								<div class="tag">
									<span>席位充足</span>
									<span class="prize">
										<i>¥</i><span>2989</span>&nbsp;起
									</span>
								</div>
							</div>
							
						</li>
						<li>
							<img src="images/img/item-img0329_03.jpg" alt="">
							<div class="desc">
								<p>韩国首尔5日4晚跟团游。暑假预售商圈五花，好...</p>
								<div class="tag">
									<span>席位充足</span>
									<span class="prize">
										<i>¥</i><span>1699</span>&nbsp;起
									</span>
								</div>
							</div>
							
						</li>
						<li>
							<img src="images/img/item-img0329_04.jpg" alt="">
							<div class="desc">
								<p>马尔代夫6日自由行·6日4晚。全球顶级海岛蜜月...</p>
								<div class="tag">
									<span>席位充足</span>
									<span class="prize">
										<i>¥</i><span>3099</span>&nbsp;起
									</span>
								</div>
							</div>
							
						</li>
						<li>
								<img src="images/img/item-img0329_05.jpg" alt="">
								<div class="desc">
									<p>香港5日自由行·仅含往返机票。星光大道+天星小...</p>
									<div class="tag">
										<span>席位充足</span>
										<span class="prize">
											<i>¥</i><span>1888</span>&nbsp;起
										</span>
									</div>
								</div>
								
							</li>
							<li>
									<img src="images/img/item-img0329_06.jpg" alt="">
									<div class="desc">
										<p>新加坡5日4晚自由行。错峰周末游，特赠送价值...</p>
										<div class="tag">
											<span>席位充足</span>
											<span class="prize">
												<i>¥</i><span>2689</span>&nbsp;起
											</span>
										</div>
									</div>
									
								</li>
						
						
						
					
					</ul>
				</div>

			</section>
			
			
			<!-- 底部导航 -->
			<footer class="tabbar">
				<div class="nav">
					<a href="index.html" class="active"><span class="home"></span><br>首页</a>
					<a href="destination.html"><span class="destination"></span><br>目的地</a>
					<a href="history.html"><span class="history"></span><br>浏览历史</a>
					<a href="myinfo.html"><span class="user"></span><br>个人</a>
				</div>
			</footer>
			
			<a href="javasript:;" id="top">顶部</a>
		

</section>
<script src="js/src/zepto.min.js"></script>
<script src="js/src/touch.js"></script>
<script src="js/index.js"></script>
<script src="js/src/swiper.min.js"></script>
<script>
		// 轮播图
		var mySwiper = new Swiper(".swiper-container",{
			loop:true,
			autoplay:{
				delay:2000,
				disableOnInteraction:false //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
	   
			},
			pagination:{
				el:".swiper-pagination",
			   clickable:true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
			},
	   })
	   
   </script>
</body>
</html>
